<template>
    <van-index-bar :index-list="indexList">
        <!-- 热门 -->
        <van-index-anchor index="热门" />
        <div class="hot">
            <template v-for="(item, index) in currentGroup?.hotCities" :key="index">
                <div class="hotItem" @click="cityClick(item)">
                    {{ item.cityName }}
                </div>
            </template>
        </div>
        <template v-for="(item, index) in currentGroup?.cities" :key="index">
            <van-index-anchor :index="item.group" />
            <template v-for="(itemm, indexx) in item.cities" :key="indexx">
                <van-cell :title="itemm.cityName" @click="cityClick(itemm)" />
            </template>
        </template>
    </van-index-bar>
</template>

<script setup>
import { computed } from 'vue';
import useCityStore from '@/store/modules/city'
import { useRouter } from 'vue-router';

// 定义数据currentGroup:一个对象
const props = defineProps({
    currentGroup: {
        type: Object,
        default: () => ({})
    }
})

const indexList = computed(() => {
    // cities是一个数组
    const list = props.currentGroup.cities.map(item => item.group)
    list.unshift('#')
    return list
})

const cityStore=useCityStore()
const route=useRouter()
function cityClick(item){
    cityStore.currentCity=item
    // 回退
    route.back()
}
</script>

<style lang="less" scoped>
.hot {
    display: flex;
    // 允许换行
    flex-wrap: wrap;
    padding: 18px 0;
    margin-right: 20px;

    .hotItem {
        height: 28px;
        width: 60px;
        line-height: 28px;
        text-align: center;

        background-color: #fff4ec;
        border-radius: 15px;
        margin: 8px 5px;

        font-size: 13px;
    }
}
</style>